<template>
    <div class="w750 h-100" :class="themes.theme" :style="{ '--themescolor': themes.color }">
        <!-- 头部状态 -->
        <div class="order-detail position-relative" :class="themes.theme" style="height: 130px">
            <div class="order-state h-100">
                <div class="state-txt" v-if="invoiceInfo">
                    <div class="sta">{{ titleObj[invoiceInfo.invStatus].title }}</div>
                    <div class="des">
                        {{ invoiceInfo.invStatus !== 4 ? titleObj[invoiceInfo.invStatus].des : '该订单已开具' + invoiceInfo.invCount + '张发票' }}
                    </div>
                </div>
                <div class="state-img">
                    <img src="@/assets/images/order-state.png" alt="" />
                </div>
            </div>

            <div v-if="invoiceInfo.invType !== 'ORDINARY_INVOICE'" class="submit-order p-1 position-absolute w-100" style="top: 80px">
                <div class="submit-order rounded-15 overflow-h" style="margin-bottom: 0">
                    <template v-if="invoiceInfo">
                        <div class="order-address">
                            <div class="user-info">
                                <div class="bg-main position-absolute rounded-circle" style="padding: 5px 3px 0; left: -20px; top: 20px">
                                    <span class="iconfont text-white" style="font-size: 30px">&#xe60c;</span>
                                </div>
                                <em class="item ml-2">收货人：{{ invoiceInfo.invConsignee }}</em>
                                <em class="item">{{ invoiceInfo.invPhone }}</em>
                            </div>
                            <div class="address-det ml-2">
                                {{ invoiceInfo.invAddress }}
                            </div>
                            <i class="arr"><img src="@/assets/images/arrow.png" alt="" /></i>
                        </div>
                    </template>
                </div>
            </div>
            <div class="p-1 w750 position-absolute" :style="{ top: invoiceInfo.invType !== 'ORDINARY_INVOICE' ? '175px' : '1.7rem' }">
                <div class="rounded-20 bg font-16 p-1">
                    <div class="text-center text-main position-relative" style="margin: 30px 0 30px">
                        <div>{{ invTypeTitle(invoiceInfo.invType) }}</div>
                        <svg class="icon svg-icon center-xy" aria-hidden="true" style="height: 43px">
                            <use xlink:href="#iconfapiaoyinzhang"></use>
                        </svg>
                    </div>
                    <div class="mt-1" style="padding-left: 0.8rem">
                        <div style="margin: 20px 0">
                            <label class="letter-sp5">发票抬头</label>
                            <span class="ml-1 text-999 font-14">{{ invoiceInfo.invTitle }}</span>
                        </div>
                        <div style="margin: 20px 0">
                            <label style="letter-spacing: 47px">税号</label>
                            <span class="text-999 font-14" style="margin-left: -31px">{{ invoiceInfo.invIdfctMark || '-' }}</span>
                        </div>
                        <div style="margin: 20px 0">
                            <label class="letter-sp5">发票金额</label>
                            <span class="ml-1 text-999 font-14">{{ invoiceInfo.invTotalAmount }}元</span>
                        </div>
                        <div style="margin: 20px 0">
                            <label class="letter-sp5">发票内容</label>
                            <span class="ml-1 text-999 font-14">明细</span>
                        </div>
                        <div style="margin: 20px 0">
                            <label class="letter-sp5">申请日期</label>
                            <span class="ml-1 text-999 font-14">{{ invoiceInfo.createTime | dateformat('YYYY-MM-DD') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 空占位符的目的是好判断-->
        <template v-if="invoiceInfo.invStatus == 4 && invoiceInfo.invRedStatus == 0" />
        <template v-else>
            <div style="margin: 16px; padding-bottom: 30px" :style="{ 'margin-top': invoiceInfo.invType == 'ORDINARY_INVOICE' ? '320px' : '420px' }">
                <van-button @click="edit" round block type="info" native-type="submit" :color="themes.color" style="height: 40px; font-size: 16px">
                    修改提交
                </van-button>
                <van-button
                    v-if="invoiceInfo.invStatus === 0 || invoiceInfo.invStatus == -1"
                    round
                    block
                    type="info"
                    native-type="submit"
                    class="mt-1"
                    color="#fff"
                    style="height: 40px; font-size: 16px"
                    @click="cancel"
                >
                    <span class="text-main">撤销申请</span>
                </van-button>
                <van-button
                    v-else
                    round
                    block
                    type="info"
                    native-type="submit"
                    class="mt-1"
                    color="#fff"
                    style="height: 40px; font-size: 16px"
                    @click="goBack"
                >
                    <span class="text-main">返回</span>
                </van-button>
            </div>
        </template>
    </div>
</template>

<script>
import { invoice } from 'api/invoiceManage'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            invoiceInfo: {
                invStatus: 0
            }, //发票信息
            invoiceTypeVal: '', //发票类型
            riceTypeVal: '', //抬头类型
            invoiceRiceVal: '', //发票抬头
            invoicePrice: '', //开票金额
            invoiceNumber: '', //税号
            invoiceReceiver: '', //发票收货人
            invoiceAddress: '', //发票收货地址
            titleObj: {
                '-2': {
                    title: '已撤销',
                    des: '您的发票已成功撤销'
                },
                '-1': {
                    title: '审核未通过',
                    des: '您的申请审核未通过，请联系商家或重新申请'
                },
                0: {
                    title: '待开票',
                    des: '商家正在开票中，请您耐心等候'
                },
                4: {
                    title: '已开票'
                    // des: '该订单已开具' + this.invoiceInfo.invCount + '张发票'
                }
            }
        }
    },

    watch: {},
    mounted() {
        this.getData()
    },
    methods: {
        // 获取详情
        getData() {
            const id = this.$route.query.id
            invoice.getInvoiceDetail(id).then((res) => {
                if (res.status == 1) {
                    this.invoiceInfo = res.result
                } else {
                    this.$toast(res.msg)
                }
            })
        },
        // 去修改
        edit() {
            this.$router.push({
                name: 'invoice',
                query: {
                    subNumber: this.invoiceInfo.businessFlowAgg, //订单号
                    type: 1, //0为付款前 1为付款后申请发票
                    id: this.invoiceInfo.id
                }
            })
        },
        // 返回
        goBack() {
            this.$router.back()
            this.$router.isBack = true
        },
        // 取消申请
        cancel() {
            this.$dialog
                .confirm({
                    title: '是否取消申请',
                    message: '请您再三考虑哦~~~'
                })
                .then(() => {
                    invoice.cancelApply(this.$route.query.id).then((res) => {
                        if (res.status == 1) {
                            this.$toast('取消成功')
                            this.goBack()
                        }
                    })
                })
        }
    },
    computed: {
        invTypeTitle() {
            return function (state) {
                const stateText = {
                    ORDINARY_INVOICE: '增值税电子普通发票',
                    VAT_INVOICE: '增值税纸质专用发票',
                    GENERAL_INVOICE: '增值税纸质普通发票'
                }
                return stateText[state]
            }
        },
        ...mapState(['themes'])
    }
}
</script>
<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/order.css" scoped></style>
<style src="@/assets/css/submit-order.css" scoped></style>

<style scoped>
.bg {
    height: 314px;
    background: url('../../assets/images/invoice-bg.png');
    background-size: 100%;
}
</style>
